<template>
  <div class="login-form">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="ruleForm2">
      <el-form-item label="品牌" required prop="brandName">
        <el-input
          type="text"
          :value="ruleForm2.brandName"
          @input="e => updateForm({ 'brandName': e })"
          auto-complete="off"
          placeholder="请输入品牌"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司全称" required prop="companyName">
        <el-input
          type="text"
          :value="ruleForm2.companyName"
          @input="e => updateForm({ 'companyName': e })"
          auto-complete="off"
          placeholder="请输入公司全称"
        ></el-input>
      </el-form-item>
      <el-form-item label="行业" required prop="industryIds">
        <el-cascader
          :options="industryList"
          :value="ruleForm2.industryIds"
          @input="e => updateForm({ 'industryIds': e })"
          :props="industryListProps"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="人员规模">
        <el-select
          :value="ruleForm2.staffSize"
          @input="e => updateForm({ 'staffSize': e })"
        >
          <el-option
            v-for="item in companySizeList"
            :key="item.id"
            :label="item.entry"
            :value="item.entry">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区">
        <el-cascader
          :options="regionData"
          :value="ruleForm2.regionIds"
          @input="e => updateForm({ 'regionIds': e })"
          :props="regionProps"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="联系人姓名" required prop="userName">
        <el-input
          type="text"
          :value="ruleForm2.userName"
          @input="e => updateForm({ 'userName': e })"
          auto-complete="off"
          placeholder="请输入联系人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" required prop="email">
      <el-input
        type="text"
        :value="ruleForm2.email"
        @input="e => updateForm({ 'email': e })"
        auto-complete="off"
        placeholder="请输入邮箱"
      ></el-input>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm2')">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "part2",
    mounted() {
      this.getInfo()
    },
    data() {
      return ({
        rules2: {
          brandName: [
            { required: true, trigger: ['blur', 'change'], message: "请输入品牌" }
          ],
          companyName: [
            { required: true, trigger: ['blur', 'change'], message: "请输入公司全称" }
          ],
          industryIds: [
            { required: true, trigger: 'blur', message: "请选择行业" }
          ],
          userName: [
            { required: true, trigger: ['blur', 'change'], message: "请输入联系人" }
          ],
          email: [
            { required: true, trigger: ['blur', 'change'], message: "请输入邮箱"  },
            { type: 'email', trigger: 'blur', message: "请输入正确邮箱格式" }
          ]
        },
        industryListProps: {
          children: 'children',
          label: 'industryName',
          value: 'industryId'
        },
        regionProps: {
          children: 'children',
          label: 'name',
          value: 'name'
        },
      })
    },
    computed: {
      ruleForm2: function() {
        console.log('------', this.$store.state.signForm)
        return ({
          regionIds: this.$store.state.signForm.regionIds,
          industryIds: this.$store.state.signForm.industryIds,
          userName: this.$store.state.signForm.userName,
          email: this.$store.state.signForm.email,
          companyName: this.$store.state.signForm.companyName,
          brandName: this.$store.state.signForm.brandName,
          staffSize: this.$store.state.signForm.staffSize,
        })
      },
      industryList: function(){ return this.$store.state.signForm.industryList },
      companySizeList: function(){ return this.$store.state.signForm.companySizeList },
      regionData: function(){ return this.$store.state.signForm.regionData },
    },
    methods: {
      getInfo() {
        this.$http.post(this.GLOBAL.host, {
          method: "User_CompanyInital",
        }).then(res => {
          this.updateForm({
            industryList: res.data.data.industryList,
            companySizeList: res.data.data.companySizeList,
            regionData: res.data.data.regionData,
          })
        })
      },
      updateForm(data) {
        this.$store.commit('updateSignForm', data)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateForm({
              step: 3,
            })
            this.$router.push({ path: '/enterpriseSignup/part3' });
            return true;
          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
